<template>
		<view :style="searchBoxStyle" class="searchBox">
			<view :style="{background:inputBackGround,height:height,padding:inputPadding}" class="search">
				<image src="/static/img/icon/search.png"></image>
				<input :maxlength="maxLength" :disabled="disabled" @click="inputClick()" :style="{fontSize:fontSize}" v-model="inputValue" @input="inputChange" @confirm="inputConfirm" :placeholder="placeholder">
			</view>
			<slot name="score">
				
			</slot>
		</view>
		<!---->
</template>

<script>
	export default {
		name:"searchBox",
		props:{
			disabled:{
			 type:Boolean,
			 default:false
			},
			borderRadius:{
				type:String,
				default:'0px'
			},
			fontSize:{
			  type:String,
			  default:'1rem'
			},
			value:{
				type:String,
				default:""
			},
			padding:{
				type:String,
				default:"10px 5px"
			},
			background:{
				type:String,
				default:"#F6F7FB"
			},
			placeholder:{
				type:String,
				default:"请输入搜索内容"
			},
			inputBackGround:{
				type:String,
				default:"#ffffff"
			},
			height:{
				type:String,
				default:"30px"
			},
			inputPadding:{
				type:String,
				default:"0px"
			},
			  maxLength: {
			    type: Number,
			    default: 100  // 默认最大100个字符
			  }
		},
		watch:{
			value(newVal){
				console.log(newVal)
				this.inputValue = newVal
			},
			background(newVal){
				this.background = newVal
			},
			score(newVal){
				this.score = newVal
			}
		},
		data() {
			return {
				inputValue:this.value,
				// displayValue:this.value,
			};
		},
		methods:{
			inputConfirm(e){
				this.$emit("inputChange",e.detail.value)
			},
			inputClick(){
				this.$emit("inputClick")
			},
			inputChange(e){
				this.$emit("input",e.detail.value)
			}
		},
		computed:{
			searchBoxStyle(){
				return `background:${this.background};border-radius:${this.borderRadius};padding:${this.padding}`
			}
		}
	}
</script>

<style scoped>
	.searchBox{
		display: flex;
		align-items: center;
		height: 25px;
	}
	.search{
		display: flex;
		align-items: center;
		border-radius: 10px;
		height: 100%;
		width: -webkit-fill-available;
	}
	.search image{
		padding: 5px;
		height: 40rpx;
		width: 40rpx;
	}
	.search input{
		width: calc(100% - 150rpx);
		color: #6b6f74;
		letter-spacing: 2rpx;
		margin-left: 3px;
	}
	.screen{
		display: flex;
		align-items: center;
	}
</style>